<template>
  <el-row type="flex">
    <el-col :span="18">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ title }}</span>
        </div>
        <div>
          <!-- <div id="chartLineBoxo" style="width: 100%; height: 200px"></div> -->
           <div id="chartLineBoxs2" style="width: 100%; height: calc(322px - 58px)"></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" class="myflex">
      <el-card class="box-card">
        <div class="minh">
          <div class="stitle">{{ getSLMGas }}</div>
          <el-divider></el-divider>
          <div class="sname">上耗电量(kW·h)</div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="minh">
          <div class="stitle">{{ getCLMGas }}</div>
          <el-divider></el-divider>
          <div class="sname">当月耗电量(kW·h)</div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import echarts from "echarts";
export default {
  computed: {
    //上月总气
    getSLMGas() {
      let sum = 0;
      let array = this.getLMGas();
      for (let i of array) {
        sum += i;
      }
      return sum.toFixed(1);
    },
    getCLMGas() {
      let sum = 0;
      let array = this.getCMGas();
      for (let i of array) {
        sum += i;
      }
      return sum.toFixed(1);
    },
  },
  mounted() {
    console.log("mounted");
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById("chartLineBoxs2"));

    // 指定图表的配置项和数据
    let option = {
      // title: {
      //   text: "",
      // },
      tooltip: {},
      legend: {
        data: ["本月产气量","上月产气量"],
      },
      xAxis: {
        data: this.getDays(),
      },
      yAxis: {},
      series: [
        // {
        //   name: "销量",
        //   type: "bar",
        //   data: [5, 20, 36, 10, 10, 20],
        // },
        {
          name: "本月产气量",
          type: "bar",
          data: this.getCMGas(),
        },
        {
          name: "上月产气量",
          type: "bar",
          data: this.getLMGas(),
        },
      ],
      color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    setTimeout(() => {
      myChart.resize()
    }, 2000);
    
  },
  updated() {
    console.log("updated");
  },
  methods: {
    getDay(month) {
      //查询某个月的天数
      let days = -1;
      if (mouth == 2) {
        days = year % 4 == 0 ? 29 : 28;
      } else if (
        mouth == 1 ||
        mouth == 3 ||
        mouth == 5 ||
        mouth == 7 ||
        mouth == 8 ||
        mouth == 8 ||
        mouth == 12
      ) {
        days = 31;
      } else days = 30;
      return days;
    },
    getDays() {
      let arr = [];
      for (let i = 1; i <= 31; i++) {
        arr.push(i);
      }
      return arr;
    },
    getCMGas() {
      //本月产气量
      let array = [];
      for (let i = 1; i <= new Date().getDate(); i++) {
        let value = 50000 + (80000 - 50000) * Math.random().toFixed(2);
        array.push(value);
      }
      return array;
    },
    getLMGas() {
      //上月产气量
      let array = [];
      for (let i = 1; i <= 31; i++) {
        let value = 50000 + (80000 - 50000) * Math.random().toFixed(2);
        array.push(value);
      }
      return array;
    },
  },
  data() {
    return {
      title: "上月/本月耗电量",
      month: new Date().getMonth()+1
    };
  },
};
</script>

<style scoped>
.minh {
  padding: 25px;

  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  /* align-items: center; */
}
.stitle {
  font-size: 20px;
  color: deepskyblue;
}
.sunit {
  font-size: 10px;
}
.sname {
  text-align: center;
  /* color: white; */
}
.el-divider--horizontal {
  margin: 0;
}
.myflex{
  display: flex;
  flex-direction: column;
}
.box-card{
  flex: 1;
}
</style>